<!--
	@title: Aadvanced Tic-Tac-Toe
	@author: Yuvraj Singh Babrah
	@last edited: 19 Januarty 2015
	@licence: MIT
	@demo: http://yuvrajbabrah.host22.com/attt
-->

<!-- place this code in your html head tag -->
	<!-- code starts here -->
		<link rel="stylesheet" href="css/advanced_xo.css" /> <!-- css -->
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <!-- **important** jQuery library required to run the game -->
		<script type="text/javascript" src="js/advanced_xo.js"></script> <!-- **important** js code to run the game -->
	<!-- code ends here -->


<!-- place this code in your html body tag -->
	<!-- code starts here -->
		<div class="gameboard">
			<div class="playerselect">
				<div class="playerselecttext">select to play ...</div>
				<div class="options">
					<div class="opt2" style="background: rgb(55,18,75);">zero</div>
					<div class="opt1" style="background: rgb(50,34,125); margin-left: 7px;">cross</div>
					
				</div>
			</div>
			<div class="resultbox">
				<div class="reload"></div>
				<div class="continue"></div>
			</div>
			<script type="text/javascript">
				function readCookie(name){
					nameEQ=name+"=";
					ca=document.cookie.split(';');
					for(cook=0;cook<ca.length;cook++){
						cc=ca[cook];
						while(cc.charAt(0)==' ') cc=cc.substring(1,cc.length);
						if(cc.indexOf(nameEQ)==0) return cc.substring(nameEQ.length,cc.length);
				}//for
				return null;
			}//readcookie
			level = readCookie("levelnum");
			if(level==null)
				level = 3;
			level = parseInt(level);
			showbox(level);
			function showbox(level){
				for(var i=1;i<=level*level;i++){
					document.write("<div class=box"+i+">"+i+"</div>");
				}
			}
			</script>
		</div>
		<div class="scoreboard">
			<div class="player1box">
				<div class="player1"></div>
			</div>
			<div class="player2box" style="float: right;margin-right: 5px;">
				<div class="player2"></div>
			</div>
		</div>
		<div class="winbar">
			<div class="adjust1" style="width: 178px; float: left; margin-left: 0px;">
			<div class="win1" style="float: right;"></div>
			</div>
			<div class="adjustt2" style="width: 178px; float: right; margin-right: 0px;">
			<div class="win2" style="float: left;"></div>
			</div>
		</div>
		<div class="smalltext">
			The first basic thing, select your color and try to rule the board. Game On!!
		</div>
	<!-- code ends here-->